import React, { Component, Suspense, lazy } from 'react'
import Slidebar from './Slidebar'
import Navbar from './Navbar'
import {Redirect,Route} from 'react-router-dom'
import '@/styles/views/Layout.scss'
import {connect} from 'react-redux'
import {getUserInfo} from '@/utils/auth'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import Purchase from '../pages/purchase';
import Warehouse from '../pages/warehouse';
import Tire from '../pages/tire';
import Maintain from '../pages/maintain';



class Layout extends Component {

    componentDidMount(){
        console.log(this.props)
    }

    render() {
        const {info} = this.props
        const List = [
            {path:'/p/maintain',component:'maintain',file:Maintain},
            {path:'/p/tire',component:'tire',file:Tire},
            {path:'/p/warehouse',component:'warehouse',file:Warehouse},
            {path:'/p/purchase',component:'purchase',file:Purchase}
        ]
        
        const {location} = this.props 

        return (
            <div className="Layout">
                <Slidebar/>
                
                <div className="main_container">
                    <div className="xwarp main_screen">
                            <Navbar/>
                            <TransitionGroup className={'menu_container router-wrapper'}>
                                <CSSTransition
                                    timeout={500}
                                    classNames={'fade'}
                                    key={location.pathname}
                                >
                                <div className="xwarp">
                                        {
                                            getUserInfo()?
                                            List.map((item,index)=>{
                                                // const DynamicComponent = lazy(()=>import(`@/pages/${item.component}/index`))
                                                return <Route 
                                                            exact
                                                            path={item.path}
                                                            key={index}
                                                            component={item.file}
                                                        />  
                                            })
                                            :<Redirect to={'/login'}/>
                                        }
                                    </div>
                                </CSSTransition>
                            </TransitionGroup>
                            
                    </div>
                </div>
            </div>
        );
    }
}


const mapStateToProps = (state, args) => {
    return {
        info:state.permission||[]
    }
}

export default connect(mapStateToProps)(Layout);


// <Route 
//     exact
//     path={item.path}
//     key={index}
//     render={
//     routeProps => (
//         <Suspense fallback={<div>loading...</div>}>
//         <DynamicComponent info={info} {...routeProps}/>
//         </Suspense>
//     )
// }
// />


// <TransitionGroup className={'router-wrapper'}>
//     <CSSTransition
//     timeout={500}
//     classNames={'fade'}
//     key={location.pathname}
//     >

//     </CSSTransition>
// </TransitionGroup>